<template>
	<view class="container">
		<!-- 顶部导航 -->
		<!-- :style="{background: userCardBg}" -->
		<view class="header">
			<!-- 当前学校信息 -->
			<view class="school-banner" @click="showSchoolPopup = true"
				:style="{ backgroundImage: `url(${currentSchool.img})` }">
				<view class="school-info-mask">
					<view class="school-name">{{ currentSchool.school_name }}</view>
					<view class="school-desc">{{ currentSchool.title }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="" style="padding: 25rpx;">
		<u-search
		  v-model="searchValue"
		  placeholder="搜索告白内容..."
		  :show-action="true"
		  action-text="搜索"
		  @click-action="onSearch"
		  class="search-bar"
		></u-search>
	</view> -->
		<u-sticky>
			<view style="position: relative; background: #fff;padding-bottom: 10rpx;">
				<u-tabs line-width="20" :list="list1" @click="click"></u-tabs>
				<view @click="downShow=!downShow"
					style="width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center; background: #fff;position: absolute;right: 0rpx;top: 10rpx;">
					<u-icon :name="downShow?'arrow-down' :'arrow-up'" size="20"></u-icon>
				</view>
			</view>
			<!-- 下拉选择面板 -->
			<view v-show="!downShow" class="dropdown-panel" @click.stop>
				<!-- 标签组标题 -->
				<view class="tag-group">
					<!-- 标签列表 -->
					<view class="tag-list">
						<view v-for="tag in list1" :key="tag.id"
							:class="tag.name == current  ? 'tag-item selected' : 'tag-item'" @click="toggleTag(tag)">
							{{ tag.name }}
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 搜索栏 -->

		<!-- 告白列表 -->
		<view class="confession-list">
			<view @click.native.stop="goToComment(item)" class="confession-item"
				v-for="(item, index) in filteredConfessionList" :key="index">
				<!-- 用户信息 -->
				<view class="user-info">
					<u-avatar @click.native.stop="userClick(item)" :src="item.avatar" size="40"></u-avatar>
					<view class="user-detail">
						<view class="user-name">
							{{ item.nickname }}
							<view class="campus-tag" v-if="item.school">{{ item.school.school_name }}</view>
						</view>
						<view class="publish-time">{{ formatRelativeTime(item.created_at) }}</view>

					</view>
				</view>

				<!-- 告白内容 -->
				<view class="confession-content">{{ item.content }}</view>

				<!-- 媒体展示 -->
				<view class="media-container" v-if="hasImages(item) && hasImages(item).length > 0">

					<!-- 1个媒体 -->
					<view class="media-item media-1" v-if="hasImages(item).length === 1"
						v-for="(media, mediaIndex) in hasImages(item)" :key="mediaIndex"
						@click.native.stop="previewMedia(hasImages(item), mediaIndex)">
						<view v-if="media.type === 'image'" class="image-wrapper">
							<image :src="media.url" class="confession-media"></image>
						</view>
						<view v-else-if="media.type === 'video'" class="video-wrapper">
							<image :src="media.url || 'https://picsum.photos/seed/video/300/300'"
								class="confession-media"></image>
							<view class="play-icon">
								<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
							</view>
						</view>
					</view>

					<!-- 2个媒体 -->
					<view class="media-item media-2" v-if="hasImages(item).length === 2"
						v-for="(media, mediaIndex) in hasImages(item)" :key="mediaIndex"
						@click.native.stop="previewMedia(hasImages(item), mediaIndex)">
						<view v-if="media.type === 'image'" class="image-wrapper">
							<image :src="media.url" class="confession-media"></image>
						</view>
						<view v-else-if="media.type === 'video'" class="video-wrapper">
							<image :src="media.cover || 'https://picsum.photos/seed/video/300/300'"
								class="confession-media"></image>
							<view class="play-icon">
								<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
							</view>
						</view>
					</view>

					<!-- 3个媒体 -->
					<view class="media-item media-3" v-if="hasImages(item).length === 3"
						v-for="(media, mediaIndex) in hasImages(item)" :key="mediaIndex"
						@click.native.stop="previewMedia(hasImages(item), mediaIndex)">
						<view v-if="media.type === 'image'" class="image-wrapper">
							<image :src="media.url" class="confession-media"></image>
						</view>
						<view v-else-if="media.type === 'video'" class="video-wrapper">
							<image :src="media.cover || 'https://picsum.photos/seed/video/300/300'"
								class="confession-media"></image>
							<view class="play-icon">
								<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
							</view>
						</view>
					</view>

					<!-- 4个媒体 -->
					<view class="media-item media-4" v-if="hasImages(item).length === 4"
						v-for="(media, mediaIndex) in hasImages(item)" :key="mediaIndex"
						@click.native.stop="previewMedia(hasImages(item), mediaIndex)">
						<view v-if="media.type === 'image'" class="image-wrapper">
							<image :src="media.url" class="confession-media"></image>
						</view>
						<view v-else-if="media.type === 'video'" class="video-wrapper">
							<image :src="media.cover || 'https://picsum.photos/seed/video/300/300'"
								class="confession-media"></image>
							<view class="play-icon">
								<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
							</view>
						</view>
					</view>

					<!-- 5-9个媒体 -->
					<view class="media-item media-more" v-if="hasImages(item).length > 4 && hasImages(item).length <= 9"
						v-for="(media, mediaIndex) in hasImages(item).slice(0, 9)" :key="mediaIndex"
						@click.native.stop="previewMedia(hasImages(item), mediaIndex)">
						<view v-if="media.type === 'image'" class="image-wrapper">
							<image :src="media.url" class="confession-media"></image>
						</view>
						<view v-else-if="media.type === 'video'" class="video-wrapper">
							<image :src="media.cover || 'https://picsum.photos/seed/video/300/300'"
								class="confession-media"></image>
							<view class="play-icon">
								<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
							</view>
						</view>
					</view>

					<!-- 超过9个显示更多 -->
					<view class="more-media" v-if="hasImages(item).length > 9"
						@click="previewMedia(hasImages(item), 0)">
						<text>+{{ hasImages(item).length - 9 }}</text>
					</view>
				</view>

				<!-- 互动区域 -->
				<view class="interaction-area">
					<view class="like-section" @click.native.stop="toggleLike(item)">
						<u-icon :name="item.is_liked ? 'heart-fill' : 'heart'"
							:color="item.is_liked ? '#FF4544' : '#999'" size="18"></u-icon>
						<text class="like-count">{{ item.like_count }}</text>
					</view>
					<view class="comment-section" @click.native.stop="goToComment(item)">
						<u-icon name="chat" color="#999" size="18"></u-icon>
						<text class="comment-count">{{ item.comment_count }}</text>
					</view>
					<view class="share-section">
						<button open-type="share" :data-id="item.id">
							<u-icon name="share" color="#999" size="18"></u-icon>
						</button>
					</view>

				</view>
			</view>
		</view>
		<view style="margin-top: 100rpx;"></view>

		<!-- 加载更多 -->
		<!-- <u-loadmore v-if="filteredConfessionList.length >0" :status="loadStatus"  class="load-more" @click="loadMore"></u-loadmore> -->
		<view v-if="filteredConfessionList.length <= 0" style=" text-align: center;">
			<image style="width: 300rpx;" src="/static/image/que.png" mode="widthFix"></image>
		</view>
		<view style="padding-bottom: 50rpx;"></view>

		<!-- 学校选择弹窗 -->
		<u-popup :show="showSchoolPopup" mode="bottom" :round="true" :closeable="true" close-icon="close"
			style="position: relative;" @close="onPopupClose">
			<view style="position: absolute; z-index: 100;top: 25rpx;width: 92%; margin-left: 4%;">
				<view class="school-popup-title">选择学校</view>
				<view class="school-search" style="background: #fff;padding: 4rpx 5rpx;border-radius: 30rpx;">
					<u-search v-model="schoolSearchValue" placeholder="搜索学校..." :show-action="false"
						@input="searchSchool"></u-search>
				</view>
			</view>
			<view class="school-popup" style="background: #f1f1f1;">

				<view style="margin-top: 160rpx;"></view>
				<view class="school-list">
					<view class="school-item" v-for="(school, idx) in filteredSchoolList" :key="idx"
						:class=" school.school_id == currentSchool.school_id ?'active':''"
						@click="selectSchool(school)">
						<view class="school-cover" :style="{ backgroundImage: `url(${school.img})` }"></view>
						<view class="school-item-info">
							<view class="school-item-name">{{ school.school_name }}</view>
							<view class="school-item-address">{{ school.title }}</view>
						</view>
						<u-icon name="checkmark-circle-fill" size="20" color="#FF4544"
							v-if="school.school_id === currentSchool.school_id"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<BottomNav currentPage="home"></BottomNav>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				searchValue: '',
				confessionList: [],
				loadStatus: 'loadmore',
				loadText: {
					// loadmore: '上拉加载更多',
					// loading: '加载中...',
					// nomore: '没有更多数据了'
				},
				page: 1,
				pageSize: 10,
				showSchoolPopup: false,
				currentSchool: {
					school_id: 0,
					school_name: '全部学校',
					img: 'https://picsum.photos/seed/allschool/750/300',
					title: '汇聚各高校精彩告白，分享青春故事',
					campuses: [] // 校区列表
				},
				currentCampusId: 0, // 当前选中的校区ID，0表示所有校区
				schoolList: [],
				filteredSchoolList: [],
				schoolSearchValue: '',
				downShow: true,
				colorGradients: [
					'linear-gradient(135deg, #FF9E9E, #E0C3FC)',
					'linear-gradient(135deg, #92A3FD, #9DCEFF)',
					'linear-gradient(135deg, #C58BF2, #EEA4CE)',
					'linear-gradient(135deg, #8EC5FC, #E0C3FC)'
				],
				userInfo: {
					nickname: '用户'
				},
				handleScrol: null,
				labelId: '',
				current: '',
				school_id: '',
				tagIndex: 0
			}
		},
		onReachBottom() {
			// 页面上拉触底事件的处理函数
			if (this.loadStatus === 'loadmore') {
				this.getConfessionList()
			}
		},
		computed: {
			userCardBg() {
				const index = this.userInfo.nickname.length % this.colorGradients.length
				return this.colorGradients[index]
			},
			// 过滤后的告白列表（根据校区筛选）
			filteredConfessionList() {
				if (this.currentSchool.id === 0) {
					// 全部学校无需校区筛选
					return this.confessionList
				}

				if (this.currentCampusId === 0) {
					// 选择所有校区
					return this.confessionList.filter(item => item.school.id === this.currentSchool.id)
				}

				// 按校区筛选
				return this.confessionList.filter(item =>
					item.school.id === this.currentSchool.id &&
					item.campus && item.campus.id === this.currentCampusId
				)
			},
			currentTabName() {
				return this.list1[this.current]?.name || '请选择'
			},
			dropdownOptions() {
				return this.list1.map((item, index) => {
					return {
						label: item.name,
						value: index
					}
				})
			}
		},

		onLoad() {

			this.getSchoolData()
		},
		onShow() {
			this.getlist()
			this.getConfessionList()
		},
		// 如果需要自定义分享卡片，还需添加 onShareAppMessage 生命周期函数
		onShareAppMessage(res) {
			// 判断是否来自按钮分享
			if (res.from === 'button') {
				const confessionId = res.target.dataset.id
				const confession = this.confessionList.find(item => item.id === confessionId)

				if (confession) {
					return {
						title: confession.content.length > 30 ?
							confession.content.substring(0, 30) + '...' : confession.content,
						path: `/pages/index/noteDetail?id=${confession.id}`,
						imageUrl: confession.images && confession.images.length > 0 ?
							confession.images[0].url : 'https://picsum.photos/seed/share/300/300',
						success: (res) => {
							console.log('自定义分享成功', res)
						},
						fail: (err) => {
							console.log('自定义分享失败', err)
						}
					}
				}
			}

			// 默认分享内容
			return {
				title: '校园告白墙',
				path: '/pages/index/index',
				imageUrl: 'https://picsum.photos/seed/default/300/300'
			}
		},
		methods: {
			formatRelativeTime(dateString) {
				const date = new Date(dateString);
				const now = new Date();
				const diffInSeconds = Math.floor((now - date) / 1000);

				const seconds = Math.abs(diffInSeconds);
				const minutes = Math.floor(seconds / 60);
				const hours = Math.floor(minutes / 60);
				const days = Math.floor(hours / 24);

				if (diffInSeconds < 0) {
					// 未来时间
					if (seconds < 60) return '刚刚';
					if (minutes < 60) return `${minutes}分钟后`;
					if (hours < 24) return `${hours}小时后`;
					return `${days}天后`;
				} else {
					// 过去时间
					if (seconds < 60) return '刚刚';
					if (minutes < 60) return `${minutes}分钟前`;
					if (hours < 24) return `${hours}小时前`;
					return `${days}天前`;
				}
			},
			// 切换标签选择状态
			toggleTag(tag) {
				const index = this.list1.findIndex(t => t.id === tag.id);
				this.labelId = tag.id
				this.current = tag.name
				this.confessionList = []
				this.loadStatus = 'nomore'
				this.page = 1
				this.getConfessionList()
				//  if (index > -1) {
				// // 移除标签
				// this.list1.splice(index, 1);
				//  } else {
				// // 添加标签
				// // 检查是否需要排他性选择（同组只能选一个）
				// if (tag.exclusive) {
				//   // 移除同组的其他标签
				//   this.list1 = this.list1.filter(t => 
				// 	t.group !== tag.group
				//   );
				// }

				// this.list1.push(tag);
				//  }
			},
			// 检查标签是否被选中
			isTagSelected(tag) {
				console.log('dadada', tag)
				return this.list1.filter(t => t.id == tag.id);
			},


			// 获取学校列表
			async getSchoolData() {
				const params = {
					school_name: this.schoolSearchValue
				}
				const res = await this.$api.get('/school/list', params, true)
				console.log('dsssss', res.data.data)
				if (res.data.code === 200) {
					this.filteredSchoolList = res.data.data
					this.filteredSchoolList.unshift({
						school_id: 0,
						school_name: '全部学校',
						img: 'https://picsum.photos/seed/allschool/750/300',
						title: '汇聚各高校精彩告白，分享青春故事',
					})
				}
			},
			userClick(item) {
				uni.navigateTo({
					url: `/pagesA/user?id=${item.user_id}`
				})
			},
			// 判断是否有图片
			hasImages(item) {
				return JSON.parse(item.images) || [];
			},
			async getlist() {
				const res = await this.$api.get('/Confessions/category', '', true)
				if (res.data.code === 200) {
					this.list1 = res.data.data
					this.list1.unshift({
						id: '',
						name: '全部'
					})
				}
			},
			click(item) {
				console.log('item', item);
				this.labelId = item.id
				this.loadStatus === 'loadStatus'
				this.current = item.name
				this.page = 1;
				this.confessionList = []
				this.getConfessionList()
			},
			// 获取告白列表
			async getConfessionList() {
				// if (this.loadStatus === 'nomore') return
				this.loadStatus = 'loading'

				const res = await this.$api.get('/Confessions/list', {
					page: this.page,
					limit: this.pageSize,
					category_id: this.labelId,
					school_id: this.currentSchool.school_id || ''
				}, true)
				console.log('------------------', res.data.data)
				if (res.data.code === 200) {
					this.loadStatus = 'nomore'
					console.log('dasdadas', res.data.data.list)
					if (res.data.data.list.length === 0) {
						// 如果没有更多数据
						// this.confessionList = res.data.data.list
						this.loadStatus = 'loadmore'
						this.loadText.loadmore
					} else {
						// 有新数据，追加到列表

						if (res.data.data.total * res.data.data.limit > this.confessionList.length * this.pageSize) {
							this.page++
							this.confessionList = this.confessionList.concat(res.data.data.list)
						} else {
							this.confessionList = res.data.data.list
						}

						this.loadStatus = 'loadmore'
					}
				}

			},



			// 格式化时间
			formatTime(timestamp) {
				const date = new Date(timestamp)
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			},

			// 搜索
			onSearch() {
				console.log('搜索内容:', this.searchValue)
			},

			// 切换点赞
			async toggleLike(item) {
				item.is_liked == 0 ? 1 : 0
				if (item.is_liked == 0) {
					await this.$api.post('/Like/add', {
						uid: item.user_id,
						target_id: item.id,
						target_type: 1
					}, true)
					item.is_liked = 1
					item.like_count = item.like_count + 1
				} else {
					await this.$api.post('/Like/cancel', {
						uid: item.user_id,
						target_id: item.id,
						target_type: 1
					}, true)
					item.is_liked = 0
					item.like_count = item.like_count - 1
				}
			},

			// 去评论
			async goToComment(item) {
				item.view_count += 1
				const res = await this.$api.post('/Confessions/reads', {
					id: item.id
				}, true)
				uni.navigateTo({
					url: `/pages/index/noteDetail?id=${item.id}`,
				})
			},

			// 分享
			shareConfession(id) {
				console.log('分享告白:', id)
				// 查找要分享的告白内容
				const confession = this.confessionList.find(item => item.id === id)

				if (!confession) {
					uni.showToast({
						title: '分享内容不存在',
						icon: 'none'
					})
					return
				}

				// 调用微信分享接口
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})

				// 触发分享操作
				uni.share({
					// 分享到微信好友
					path: `/pages/confession/detail?id=${confession.id}`, // 分享路径，需指向具体页面
					title: confession.content.length > 30 ?
						confession.content.substring(0, 30) + '...' : confession.content, // 分享标题
					imageUrl: confession.mediaList && confession.mediaList.length > 0 ?
						confession.mediaList[0].url : 'https://picsum.photos/seed/share/300/300', // 分享封面图
					success: (res) => {
						console.log('分享成功', res)
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
					},
					fail: (err) => {
						console.log('分享失败', err)
						uni.showToast({
							title: '分享失败，请重试',
							icon: 'none'
						})
					}
				})
			},

			// 加载更多
			loadMore() {
				if (this.loadStatus === 'loadmore') {
					this.loadStatus = 'loading'
					this.getConfessionList()
				}
			},

			// 切换学校
			switchSchool() {
				this.showSchoolPopup = true
			},

			// 搜索学校
			searchSchool() {
				if (!this.schoolSearchValue) {
					this.getSchoolData()
					return
				}
			},

			// 选择学校
			selectSchool(school) {
				this.currentSchool = school
				if (school.school_id !== this.currentSchool.school_id) {
					this.currentCampusId = 0 // 重置校区筛选

					this.page = 1
					this.loadStatus = 'loadmore'
					this.getConfessionList()
				}
				this.showSchoolPopup = false
				this.schoolSearchValue = ''
				this.filteredSchoolList = this.schoolList
			},

			// 校区筛选
			filterByCampus() {
				// 重置分页和加载状态
				this.page = 1
				this.loadStatus = 'loadmore'
				this.getConfessionList()
			},

			// 弹窗关闭
			onPopupClose() {
				this.showSchoolPopup = false
				this.schoolSearchValue = ''
				this.filteredSchoolList = this.schoolList
			},

			// 点击轮播图
			bannerClick(item) {
				console.log('点击轮播图:', item)
			},

			// 预览媒体
			previewMedia(mediaList, index) {
				const urls = mediaList.map(media => media.url)
				uni.previewImage({
					urls,
					current: urls[index]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 全局变量 */
	$primary-color: #FF4544;
	$text-color: #333;
	$light-text-color: #999;
	$border-color: #f5f5f5;
	$bg-color: #f8f8f8;
	$campus-tab-bg: #fff;

	/* 下拉面板样式 */
	.dropdown-panel {
		background-color: white;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	/* 标签组样式 */
	.tag-group {
		margin-bottom: 20rpx;
	}

	.group-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 15rpx;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.tag-item {
		padding: 10rpx 20rpx;
		background-color: #f0f0f0;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #666;
		white-space: nowrap;
	}

	.tag-item.selected {
		background-color: #1989fa;
		color: white;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.action-buttons button {
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	.action-buttons button:first-child {
		background-color: #f0f0f0;
		color: #666;
	}

	.action-buttons button:last-child {
		background-color: #1989fa;
		color: white;
	}

	/* 已选标签样式 */
	.selected-tags {
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.selected-title {
		font-size: 26rpx;
		color: #999;
	}

	.tag-badge {
		padding: 8rpx 20rpx;
		background-color: #e6f4ff;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #1989fa;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.tag-badge .u-icon {
		margin-left: 5rpx;
	}

	.content {
		padding: 20rpx;
	}

	/* 加载提示样式 */
	.loading-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;

		.u-spinner {
			margin-right: 15rpx;
		}
	}

	.no-more-tip {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;
	}

	.container {
		background-color: $bg-color;
		min-height: 100vh;
	}

	.header {
		padding: 15rpx 0;
	}

	.school-banner {
		height: 200rpx;
		background-size: cover;
		background-position: center;
		position: relative;
		margin: 0 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.school-info-mask {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	}

	.school-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 5rpx;
	}

	.school-desc {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.search-bar {
		padding: 15rpx 20rpx;
		background-color: #fff;
	}

	.tabs {
		background-color: $campus-tab-bg;
		margin-bottom: 15rpx;
	}

	/* 校区筛选样式 */
	.campus-filter {
		background-color: $campus-tab-bg;
		padding-bottom: 15rpx;
		margin-bottom: 15rpx;
	}

	.campus-tabs {
		margin: 0 20rpx;
	}

	.banner {
		margin: 0 20rpx 15rpx;
	}

	.confession-list {
		padding: 20rpx;
	}

	.confession-item {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 15rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
	}

	.confession-item:hover {
		transform: translateY(-2rpx);
	}

	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.user-detail {
		margin-left: 15rpx;
		flex: 1;
	}

	.user-name {
		font-size: 28rpx;
		font-weight: 500;
		color: $text-color;
	}

	.publish-time {
		font-size: 22rpx;
		color: $light-text-color;
		margin-top: 5rpx;
	}

	.campus-tag {
		font-size: 20rpx;
		color: #969696;
		background-color: rgba(255, 69, 68, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		display: inline-block;
		margin-top: 5rpx;
	}

	.confession-content {
		font-size: 28rpx;
		color: $text-color;
		margin-bottom: 15rpx;
		line-height: 1.5;
	}

	.media-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.media-item {
		overflow: hidden;
		border-radius: 8rpx;
		position: relative;
		cursor: pointer;
		margin-bottom: 1%;
	}

	.media-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.03);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.media-item:hover::before {
		opacity: 1;
	}

	/* 不同数量媒体的样式 */
	.media-1 {
		width: 100%;
		height: 400rpx;
	}

	.media-2 {
		width: 49.5%;
		height: 300rpx;
	}

	.media-3 {
		width: 33%;
		height: 200rpx;
	}

	.media-4 {
		width: 49.5%;
		height: 200rpx;
	}

	.media-more {
		width: 33%;
		height: 200rpx;
	}

	.image-wrapper,
	.video-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.confession-media {
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}

	.confession-media:hover {
		transform: scale(1.02);
	}

	.video-wrapper .play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.more-media {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 33%;
		height: 150rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		z-index: 1;
		cursor: pointer;
	}

	.interaction-area {
		display: flex;
		justify-content: space-around;
		padding-top: 15rpx;
		border-top: 1rpx solid $border-color;
		margin-top: 15rpx;
	}

	.like-section,
	.comment-section,
	.share-section button {
		background: none;
		border: none;
		padding: 0;
		display: flex;
		align-items: center;
		color: $light-text-color;
		font-size: 24rpx;
		padding: 10rpx;
		border-radius: 50rpx;
		transition: background-color 0.3s ease;

		&:hover {
			background-color: $bg-color;
		}
	}

	.share-section {
		display: flex;
		align-items: center;
		color: $light-text-color;
		font-size: 24rpx;
		padding: 10rpx;
		border-radius: 50rpx;
		transition: background-color 0.3s ease;
	}

	.like-section:hover,
	.comment-section:hover,
	.share-section:hover {
		background-color: $bg-color;
	}

	.like-count,
	.comment-count {
		margin-left: 8rpx;
	}

	.load-more {
		padding: 30rpx 0;
		text-align: center;
	}

	/* 学校选择弹窗 */
	.school-popup {
		padding: 30rpx 20rpx;
		max-height: 70vh;
		overflow-y: auto;
	}

	.school-popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.school-search {
		margin-bottom: 20rpx;
	}

	.school-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.school-item {
		display: flex;
		align-items: center;
		border-radius: 12rpx;
		background-color: #fff;
		transition: background-color 0.3s ease;
		overflow: hidden;
		padding: 20rpx;
	}

	.school-item:hover {
		background-color: $bg-color;
	}

	.school-item.active {
		background-color: rgba($primary-color, 0.1);
		border: 1rpx solid rgba($primary-color, 0.3);
	}

	.school-cover {
		width: 120rpx;
		height: 120rpx;
		background-size: cover;
		background-position: center;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.school-item-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.school-item-name {
		font-size: 28rpx;
		font-weight: 500;
		color: $text-color;
	}

	.school-item-address {
		font-size: 22rpx;
		color: $light-text-color;
		margin-top: 5rpx;
	}
</style>